<template>
  <div class="app-container">
    <div class="sku-add">
      <div class="sku-search">
        <el-form :inline="true" :model="queryParams" ref="searchForm">
          <el-form-item label="商品编号" prop="spuNo">
            <el-input v-model="queryParams.spuNo" placeholder="商品ID" />
          </el-form-item>
          <el-form-item label="商品名称" prop="spuName">
            <el-input v-model="queryParams.spuName" placeholder="商品名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTableData">筛选</el-button>
            <el-button @click="resetTableData">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="sku-button"><el-button type="primary" @click="showAddForm">创建SPU</el-button></div>
    </div>
    <el-table :data="tableData" v-loading="tableLoading">
      <el-table-column label="序号" type="index" :index="indexMethod" />
      <el-table-column prop="spuName" label="名称" />
      <el-table-column prop="spuNo" label="商品编号" />
      <el-table-column prop="originalPrice" label="原价" />
      <el-table-column prop="groupBuyPrice" label="拼单价" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="状态" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.onlineFlag === 0 ? '' : 'success'">{{ scope.row.onlineFlag === 0 ? '未上线' : '已上线' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-switch :value="scope.row.onlineFlag" :active-value="1" :inactive-value="0"
            @change="($event) => changeSwitch($event, scope.row)">
          </el-switch>
          <el-button style="margin-left: 5px;" @click="viewSpu(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="editSpu(scope.row)" type="text" size="small" v-if="scope.row.onlineFlag===0">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <InBody v-show="total>0">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableData"
      />
    </InBody>

    <spuForm ref="spuModal" :getTableData="getTableData" />
  </div>
</template>

<script>
import { querySpuList, openingSpuItem, querySpuDetail } from '@/api/goods';
import spuForm from './spuForm.vue';
export default {
  components: {
    spuForm
  },
  mounted() {
    this.getTableData();
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        spuName: '',
        spuNo: ''
      }
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },

    async getTableData() {
      this.tableLoading = true;
      const { code, rows, total } = await querySpuList({ ...this.queryParams })
      this.tableLoading = false
      if (code !== 200) return;
      this.tableData = rows
      this.total = +total
    },
    searchTableData(){
      this.queryParams.pageNum=1;
      this.getTableData();
    },
    resetTableData(){
      this.$refs.searchForm.resetFields();
      this.searchTableData();
    },
    showAddForm() {
      this.$refs.spuModal.showModal('form')
    },
    changeSwitch(event, item) {
      openingSpuItem({
        id: item.id,
        onlineFlag: event
      }).then(res => {
        if (res.code === 200) {
          console.log(event)
          this.$message({
            message: `${event ? '上架' : '下架'}成功`,
            type: 'success'
          });
          this.getTableData();
        }
      })
    },
    getFileList(data) {
      const dataArray = [];
      data.map(item => {
        const urlObj = new URL(item);
        const fileName = urlObj.pathname.split('/').pop();
        dataArray.push({
          uid: Date.now().toString(36) + Math.random().toString(36).substring(2),
          name: fileName,
          url: item
        })
      })
      return dataArray;
    },
    viewSpu(record) {
      querySpuDetail({ spuId: record.id }).then(res => {
        if (res.code === 200) {
          this.$refs.spuModal.detail = {
            ...res.data,
            spuHeadImages: res.data.headImages,
            spuDetailImages: res.data.detailImages,
          };
          res.data.skuInfoList.map((item,index) =>{
            this.$refs.spuModal.changeSkuItem(item.productId)
          })
          this.$refs.spuModal.showModal('view')
        }
      })
    },
    editSpu(record) {
      querySpuDetail({ spuId: record.id }).then(res => {
        if (res.code === 200) {
          this.$refs.spuModal.getSkuList();
          const detail = {
            ...res.data,
            spuProductVoList: res.data.skuInfoList,
            spuHeadImages: this.getFileList(res.data.headImages),
            spuDetailImages: this.getFileList(res.data.detailImages),
            disableSkuId: res.data.skuInfoList.map(item => item.productId),
          }
          this.$refs.spuModal.changeFormValue(detail)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sku-add {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 85% 15%;
  margin-bottom: 15px;

  div {
    &.sku-search {}

    &.sku-button {
      text-align: right;
    }
  }
}
</style>
